<template>
  <!-- 百度地图  -->
  <div id="bai-du-map">
    <!-- 技术支持和联系方式  -->
  </div>
</template>
 
 <script>
import AMapLoader from "@amap/amap-jsapi-loader";

// 设置安全密钥
window._AMapSecurityConfig = {
  securityJsCode: "	de7ffea82c81868ed8692103c8247a58",
};
export default {
  data() {
    return {
      map: null,
      mouseTool: null,
      overlays: [],
      auto: null,
      placeSearch: null,
    };
  },
  mounted() {
    this.initMap();
  },
  methods: {
    initMap() {
      AMapLoader.load({
        key: "de7ffea82c81868ed8692103c8247a58",
        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        // plugins: [地图用到的插件], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
      })
        .then((AMap) => {
          // 初始化地图
          this.map = new AMap.Map("bai-du-map", {
            viewMode: "2D", //  是否为3D地图模式
            zoom: 12, // 初始化地图级别
            center: [117.149378, 36.653999], //中心点坐标  郑州
            resizeEnable: true,
          });
          //   点标记
          var marker = new AMap.Marker({
            position: new AMap.LngLat(117.149378, 36.653999), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
            title: "济南",
            icon: new AMap.Icon({
              size: new AMap.Size(40, 40),
              image: require("../../images/1.jpg"),
              imageSize: new AMap.Size(40, 40),
              // 用于存数据
              extData:{
                id:1231312,
                text:'cehsi '
              }
            }),
          });
          this.map.add(marker);
          marker.on("click", function (e) {
            console.log(e);
          });
        })
        .catch((e) => {
          console.log(e);
        });
    },
  },
};
</script>
 
 <style scoped>
#bai-du-map {
  overflow: hidden;
  width: 100%;
  height: 100%;
  margin: 0;
  font-family: "微软雅黑";
}
</style>
 <style>
/* 隐藏高德logo  */
.amap-logo {
  display: none !important;
}
/* 隐藏高德版权  */
.amap-copyright {
  display: none !important;
}
</style>
 